<template>
  <div class="dashboard-container">
    <el-row :gutter="10">
      <el-col :span="2">
        <el-button @click="add" type="primary" icon="el-icon-circle-plus"
          >添加套餐权限</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="List"
      style="width: 100%"
      max-height="550"
      class="table"
      stripe>
      <el-table-column prop="permName" label="权限名称" align="center" />
      <el-table-column prop="permUrl" label="权限url" align="center" />
      <el-table-column prop="permDesc" label="权限描述" align="center" />
      <el-table-column prop="permDesc" label="权限描述" align="center" >
        <template slot-scope="scope">
          <a @click="edit(scope.row)">编辑</a> | 
          <a @click="drop(scope.row.id)">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="新增套餐权限" :visible.sync="dialogFormVisible1" @closed="clearData">
      <el-form >
        <el-form-item label="权限名称" >
          <el-input v-model="pckPermit.permName" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="权限url" >
          <el-input v-model="pckPermit.permUrl" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="权限描述" >
          <el-input v-model="pckPermit.permDesc" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogFormVisible1 = false;doAdd();">添 加</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑套餐权限" :visible.sync="dialogFormVisible2" @closed="clearData">
    <el-form >
        <el-form-item label="权限名称" >
          <el-input v-model="pckPermit.permName" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="权限url" >
          <el-input v-model="pckPermit.permUrl" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="权限描述" >
          <el-input v-model="pckPermit.permDesc" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogFormVisible2 = false;doEdit();">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import {
  allPermit,
  // toggelStatus,
  saveAdd,
  saveEdit,
  del
} from "@/api/pckPerm";
export default {
  // name: "Dashboard",
  // computed: {
  //   ...mapGetters(["name"]),
  // },
  data() {
    return {
      List: [],
      pckPermit: {
        permName: "",
        permUrl: "",
        permDesc: "",
      },
      dialogFormVisible1: false,
      dialogFormVisible2: false,
    };
  },
  methods: {
    search() {
      allPermit().then((res) => {
        this.List = res.data;
      });
    },
    add() {
      this.dialogFormVisible1 = true;
    },
    doAdd() {
      saveAdd(this.pckPermit).then((res) => {
        if (res.ok) {
          this.$message.success(res.message);
        } else this.$message.error(res.message);
      });
    },
    edit(pckPermit) {
      this.pckPermit = pckPermit;
      this.dialogFormVisible2 = true;
    },
    doEdit() {
      saveEdit(this.pckPermit).then((res) => {
        if (res.ok) {
          this.$message.success(res.message);
        } else this.$message.error(res.message);
      });
    },
    drop(pckPermId){
      del(pckPermId).then(res=>{
        if(res.ok){
          this.$message.success(res.message)
          this.search()
        }else
        this.$message.error("删除失败")
      })
    },
    // toggleStatus(pckId) {
    //   toggelStatus(pckId).then((res) => {
    //     this.search();
    //   });
    // },
    clearData() {
      this.pckPermit.permName = ""
      this.pckPermit.permUrl = ""
      this.pckPermit.permDesc = ""
      this.search()
    },
  },
  created() {
    this.search();
  },
};
</script>

<style lang="scss" scoped>
a {
  color: blue;
}

.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
